<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
	$(document).ready(function(){
		$("#sBtn").click(function(){
			location.href="${initParam.root}mypage/auth_searchDiaryByContent.do?content="+$("#searchDiary").val()+"&page=1";
		});
		$(".deleteDiary").click(function(){
			//alert($(this).parent().parent().children().eq(0).text());
			if(confirm("삭제하시겠습니까?")){
				location.href="${initParam.root}mypage/auth_deleteDiary.do?no="+$(this).parent().parent().children().eq(0).text()+"&page=${param.page}";
			}
		});
		$(".updateDiary").click(function(){
			//alert($(this).parent().parent().children().eq(0).text());
			if(confirm("수정하시겠습니까?")){
				location.href="${initParam.root}mypage/auth_updateDiaryForm.do?no="+$(this).parent().parent().children().eq(0).text()+"&page=${param.page}";
			}
		});
		$("#searchKind").change(function(){
			if($(this).val()=="date"){
				//alert($(this).val());
				$("#searchDiary").datepicker({
		  			dateFormat:"yy-mm-dd",
		  			dayNamesMin:['일','월','화','수','목','금','토'],
		  			monthNames:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
		  		});
				$("#sBtn").click(function(){
					location.href="${initParam.root}mypage/auth_searchDiaryByDate.do?date="+$("#searchDiary").val()+"&page=1";
				});
			}else{
				$("#searchDiary").datepicker('destroy');
				$("#sBtn").click(function(){
					location.href="${initParam.root}mypage/auth_searchDiaryByContent.do?content="+$("#searchDiary").val()+"&page=1";
				});
			}
		});
		$("#diaryBtn").click(function(){
			location.href="${initParam.root}mypage/auth_diaryList.do";
		});
	});
</script>
<h3>Diary 검색결과</h3>
<img src="${initParam.root}/img/diarybtn.png" height="30" id="diaryBtn"><br>
<c:forEach var="dvo" items="${requestScope.lvo.list}">
	<table width="550" style="word-wrap: break-word; table-layout: fixed">		
			<tr>
			    <td align="left" width="100">${dvo.no}</td>				
				<td align="left">${dvo.date}</td>
				<td align="right">
				<img src="${initParam.root}img/update.png" height="25"  class="updateDiary">
				<img src="${initParam.root}img/diary_delete.png" height="25"  class="deleteDiary">
				</td>
			</tr>
			<tr>
			<td colspan="3"><pre width="500" style="width:100%; height:80%; overflow:auto;">${dvo.content}</pre></td>
			</tr>
	</table>
	<hr width="550" align="left">
</c:forEach>

<br>
<p class="search" align="center">
<select id="searchKind">
	<option value="content">내용</option>
	<option value="date">작성일</option>
</select>
<input type="text" id="searchDiary"><input type="button" id="sBtn" value="검색">
</p>

<p class="paging" align="center">
   <%-- 코드를 줄이기 위해 pb 변수에 pagingBean을 담는다. --%>
   <c:set var="pb" value="${requestScope.lvo.pagingBean}"></c:set>
   <!-- 
         step2 1) 이전 페이지 그룹이 있으면 이미지 보여준다. (img/left_arrow_btn.gif)
                     페이징빈의 previousPageGroup 이용 
               2)  이미지에 이전 그룹의 마지막 페이지번호를 링크한다. 
                      hint)   startPageOfPageGroup-1 하면 됨        
    -->      
   <c:if test="${pb.previousPageGroup}">
      <a href="${initParam.root }mypage/auth_searchDiaryByDate.do?date=${param.date }&page=${pb.startPageOfPageGroup-1}">◀</a>   
   </c:if>
   <!-- step1. 1)현 페이지 그룹의 startPage부터 endPage까지 forEach 를 이용해 출력한다
               2) 현 페이지가 아니면 링크를 걸어서 서버에 요청할 수 있도록 한다.
                  현 페이지이면 링크를 처리하지 않는다.  
                  PagingBean의 nowPage
                  jstl choose 를 이용  
                  예) <a href="DispatcherServlet?command=list&page=...">               
    -->      
   <c:forEach var="i" begin="${pb.startPageOfPageGroup}" end="${pb.endPageOfPageGroup}">
   <c:choose>
      <c:when test="${pb.nowPage!=i}">
         <a href="${initParam.root }mypage/auth_searchDiaryByDate.do?date=${param.date }&page=${i}">${i}</a> 
      </c:when>
   <c:otherwise>
      <font style="color: red; font-size: 10.5pt;">${i}</font>
   </c:otherwise>
   </c:choose>
   </c:forEach>    
   <!-- 
         step3 1) 다음 페이지 그룹이 있으면 이미지(img/right_arrow_btn.gif) 보여준다. 
                     페이징빈의 nextPageGroup 이용 
               2)  이미지에 이전 그룹의 마지막 페이지번호를 링크한다. 
                      hint)   endPageOfPageGroup+1 하면 됨        
    -->   
   <c:if test="${pb.nextPageGroup}">
      <a href="${initParam.root }mypage/auth_searchDiaryByDate.do?date=${param.date }&page=${pb.endPageOfPageGroup+1}">▶</a>
   </c:if>
</p>